import React, { useState } from 'react'
import Taro,{useDidShow, useShareAppMessage} from '@tarojs/taro'
import {Image, View ,Button, Video} from '@tarojs/components'
import './index.scss'

export default function VideoDetail() {
  let capsule = {}
  if(process.env.TARO_ENV === 'weapp') capsule = Taro.getMenuButtonBoundingClientRect()
  const [info,setInfo] = useState({})
  const [collect,setCollect] = useState({})
  const [showMore,setShowMore] = useState(false)
  useDidShow(()=>{
    const {router} = Taro.getCurrentInstance()
    Taro.showLoading()
    Taro.$get('/cinema-app/api/v1/film/filmInfo',{id:router.params.id},'1').then(res=>{
      if(res.code == '1'){
        setInfo(res.content)
        _getCollectData(router.params.id)
      }
    })
  })
  useShareAppMessage(() => {
    return {
      title: info.filmName,
      path: `/mainPages/video-detail/index?id=${info.id}`,
      imageUrl: info.filmPosterUrl,
    };
  });
  const _getCollectData =e=>{
    Taro.$get('/social/score/getCommentCollect',{appId: 'cinema_film',topicId:e}).then(ret=>{
      if(ret.code != '1') return;
      setCollect(ret.content)
    })
  }
  return (
    <View className='video-detail'>
      <Image src={!info.filmPosterUrl?.includes('alicdn')?info.filmPosterUrl:info.filmPosterUrl+'_480x480'} className='detail-bg' mode='widthFix' />
      {process.env.TARO_ENV !='tt'?
      <View className="detail-nav-bar" style={{paddingTop:capsule.top+'PX',height:capsule.height+'PX'}}>
        <View style={{marginRight:'auto',color:'#fff',fontSize:'18px'}} className="at-icon at-icon-chevron-left" onClick={()=>{
          Taro.navigateBack().catch(()=>{
            Taro.reLaunch({
              url:'/pages/index/index'
            })
          })
        }}></View>
        {process.env.TARO_ENV != 'h5'?<>
          <Button className="bar-center" openType="share" style={{height:capsule.height+'PX'}}><Image src={require('@/images/share.svg')} mode='widthFix' style={{width:'18px'}} /></Button>
          <View className="bar-right" style={{width:capsule.width+'PX',height:capsule.height+'PX'}}></View>
        </>:null}
      </View>:null}
      <View className="detail-main">
        <View className="main-header">
          <Image src={!info.filmPosterUrl?.includes('alicdn')?info.filmPosterUrl:info.filmPosterUrl+'_320x320'} mode='aspectFill' className='header-img' />
          <View className="header-info">
            <View className="info-h2">{info.filmNickName}</View>
            <View className="info-sub">{info.englishName}</View>
            <View className="info-p">{info.area}/{info.duration}分钟 {info.filmType}</View>
            <View className="info-p">{info.publishDate}中国大陆上映</View>
            <View className="info-handle">
              <View className={`handle-button ${collect?.collect?'active':''}`} onClick={()=>{
                Taro.verifyLogin()
                if(collect?.collect){
                  Taro.$post('/social/topicLike/delete',{appId:'cinema_film',topicId:info.id}).then(ret=>{
                    if(ret.code == '1'){
                      collect.collect = false
                      _getCollectData(info.id)
                    }
                  })
                  return;
                }
                Taro.$post('/social/topicLike',{appId:'cinema_film',topicId:info.id}).then(ret=>{
                  if(ret.code == '1'){
                    collect.collect = true
                    _getCollectData(info.id)
                  }
                })
              }}>
                <Image className='img' src={require(collect?.collect?'@/images/love.svg':'@/images/love-black.svg')} mode='widthFix' style={{width:'20px',height:20}} />想看{collect?.collectCount}
              </View>
              <View className={`handle-button ${collect?.comment?'active':''}`} onClick={()=>{
                Taro.verifyLogin()
                Taro.navigateTo({
                  url:`/mainPages/video-comment/index?filmId=${info.id}`
                })
              }}>
                <Image className='img' src={require(collect?.comment?'@/images/collect.svg':'@/images/collect-black.svg')} mode='widthFix' style={{width:'20px',height:20}} />评分 {info.score || 0}
              </View>
            </View>
          </View>
        </View>

        {info.introduction?
        <View className="main-intro">
          <View className="detail-title">剧情简介</View>
          <View className={`intro-p ${showMore?'':'dot2'}`}>
            {info.introduction} <View className="p-unfold" onClick={()=>{setShowMore(!showMore)}}>{showMore?'收起':'展开'}</View>
          </View>
        </View>:null}
        
        {info?.filmCasts?.length?
        <View className="main-people">
          <View className="detail-title">演职人员</View>
          <View className="people-list not-bar">
            {info.filmCasts.map(res=>{
              return <View className="list-item" key={res.id}>
                <Image src={!res.photoUrl?.includes('alicdn')?res.photoUrl:res.photoUrl+'_240x240'} className='item-img' mode='aspectFill' />
                <View className="item-h2">{res.castName}</View>
                <View className="item-p">{res.castType}</View>
              </View>
            })}
          </View>
        </View>:null}
        {info?.filmPosters?.length || info.filmVideos?.length?
        <View className="main-photos">
          <View className="detail-title">预告片/照片</View>
          <View className="photos-list not-bar">
            {info.filmVideos?.map((res,idx)=>{
              return <Video src={res.filmPosterUrl} key={idx} className='item-img' onClick={()=>{
                if(process.env.TARO_ENV == 'weapp'){
                  Taro.previewMedia({
                    sources:{
                      url:res,
                      type:'video'
                    }
                  })
                }
              }}></Video>
            })}
            {info.filmPosters?.map((res,idx)=>{
              return <Image lazyLoad key={idx} onClick={()=>{
                let urls = []
                info.filmPosters.map(ret=>{urls.push(ret.filmPosterUrl)})
                Taro.previewImage({
                  current:urls[idx],
                  urls
                })
              }} src={!res.filmPosterUrl?.includes('alicdn')?res.filmPosterUrl:res.filmPosterUrl+'_160x160'} className='item-img' mode='aspectFill' />
            })}
          </View>
        </View>:null}
      </View>
      <View className="detail-button" onClick={()=>{
        Taro.verifyLogin()
        Taro.navigateTo({
          url:`/mainPages/plan/index?id=${info.id}`
        })
      }}>立即购票</View>
    </View>
  )
}
